<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo - Validform - 一行代码搞定整站的表单验证！ &copy;瑞金佬的前端路</title>
<link rel="stylesheet" href="demo/css/style.css" type="text/css" media="all" />
<link href="demo/css/demo.css" type="text/css" rel="stylesheet" />
</head>

<body>  
<div class="header">
    <div class="wraper">
    	<h1><a href="http://validform.rjboy.cn">Validform</a></h1>
        <ul class="nav">
            <li><a href="http://validform.rjboy.cn/">关于Validform</a></li>
            <li><a href="demo.html" class="current">Demo</a></li>
            <li><a href="document.html">文档</a></li>
            <li><a href="help.html">帮助</a></li>
            <li><a href="http://validform.rjboy.cn/?p=1">网友讨论</a></li>
        </ul>
    </div>
</div>
<div class="main">
    <div class="wraper">
        <p class="tr"><a href="demo.html" class="blue ml10 fz12">返回示例首页&raquo;</a></p>
        
    	<h2 class="green">分类选择，选择了其中一类就忽略其他类的验证</h2>
        <form class="registerform" method="post" action="demo/ajax_post.php">
            <table width="100%" style="table-layout:fixed;">
            	<tbody>
                <tr>
                    <td class="need" style="width:10px;">*</td>
                    <td style="width:70px;">单位性质：</td>
                    <td style="width:205px;">
                    	<input type="radio" name="property" value="person" id="person" class="pr1" datatype="*" nullmsg="请选择单位性质！" /><label for="person">个人</label>
                        <input type="radio" name="property" value="company" id="company" class="pr1" /><label for="company">公司</label>
                    </td>
                    <td><div class="Validform_checktip"></div></td>
                </tr>
                </tbody>
                <tbody class="person" style="display:none;">
                <tr>
                    <td class="need">*</td>
                    <td>性别：</td>
                    <td><input type="radio" value="1" name="gender" id="male" class="pr1" datatype="*" errormsg="请选择性别！" /><label for="male">男</label> <input type="radio" value="2" name="gender" id="female" class="pr1" /><label for="female">女</label></td>
                    <td><div class="Validform_checktip"></div></td>
                </tr>
                <tr>
                    <td class="need">*</td>
                    <td>移动电话：</td>
                    <td><input type="text" value="" name="tel" class="inputxt" datatype="m" errormsg="请输入您的手机号码！"  /></td>
                    <td><div class="Validform_checktip"></div></td>
                </tr>
                </tbody>
                <tbody class="company" style="display:none;">
                <tr>
                    <td class="need">*</td>
                    <td>所在城市：</td>
                    <td><select name="province" datatype="*" nullmsg="请选择所在城市！" errormsg="请选择所在城市！"><option value="">请选择城市</option><option value="1">瑞金市</option></select></td>
                    <td><div class="Validform_checktip"></div></td>
                </tr>
                <tr>
                    <td class="need">*</td>
                    <td>公司电话：</td>
                    <td><input type="text" value="" name="tel" class="inputxt" datatype="n7-12" errormsg="公司电话为7到12位数字！"  /></td>
                    <td><div class="Validform_checktip"></div></td>
                </tr>
                </tbody>
                <tbody>
                <tr>
                    <td class="need"></td>
                    <td></td>
                    <td colspan="2" style="padding:10px 0 18px 0;">
                        <input type="submit" value="提 交" /> <input type="reset" value="重 置" />
                    </td>
                </tr>
                </tbody>
            </table>
        </form>
        
        <h2>说明：</h2>
        <div class="tipmsg">
        	<p>传入ignoreHidden可以很容易的实现这个效果。如上例中，选择了个人的话，那么公司的相关信息就忽略验证。</p>
            <p>对某些情况下，隐藏元素也得验证时不能开启这个参数，这个时候可以动态的给相应元素添加或删除ignore参数来实现这效果。</p>
        </div>
        
    </div>
</div>

<div class="footer">
    <div class="wraper">
        <p class="fl">Copyright &copy; <a href="http://www.eloocor.com" target="_blank">易罗客</a></p>
        <p class="fr"><a href="http://www.rjboy.cn" target="_blank">瑞金佬的前端路</a><b> | </b><a href="http://validform.rjboy.cn">Validform</a><b> | </b><a href="http://www.rjboy.cn/?p=789" target="_blank">hScrollpane</a><b> | </b><a href="http://www.rjboy.cn/?p=708" target="_blank">Xslider</a></p>
    </div>
</div>

<script type="text/javascript" src="demo/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="demo/js/Validform_v5.3.2_min.js"></script>

<script type="text/javascript">
$(function(){
	//$(".registerform").Validform();  //就这一行代码！;
	
	$(":radio[name='property']").click(function(){
		var curtab=$(":radio[name='property']").filter(":checked").val();
		$(".person,.company").hide().filter("."+curtab).show();	
	});
	
	$(".registerform").Validform({
		tiptype:2,
		ignoreHidden:true
	});
})
</script>
</body>
</html>